<template>
  <div class="login-form">
    <div class="form-header">
      <h2 class="form-title">欢迎回来</h2>
      <p class="form-subtitle">登录您的账户继续使用</p>
    </div>

    <form @submit.prevent="handleSubmit" class="form">
      <div class="form-group">
        <label for="email" class="form-label">邮箱地址</label>
        <input
          id="email"
          v-model="email"
          type="email"
          class="form-input"
          placeholder="请输入您的邮箱"
          required
        />
      </div>

      <div class="form-group">
        <label for="password" class="form-label">密码</label>
        <input
          id="password"
          v-model="password"
          type="password"
          class="form-input"
          placeholder="请输入您的密码"
          required
        />
      </div>

      <div class="form-options">
        <label class="checkbox-label">
          <input
            v-model="rememberMe"
            type="checkbox"
            class="checkbox"
          />
          <span class="checkbox-text">记住我</span>
        </label>
        <a href="#" class="forgot-link">忘记密码？</a>
      </div>

      <button type="submit" class="btn btn-primary form-submit" :disabled="isLoading">
        <span v-if="isLoading" class="loading-spinner"></span>
        {{ isLoading ? '登录中...' : '登录' }}
      </button>
    </form>

    <div class="form-footer">
      <p class="footer-text">
        还没有账户？
        <a href="#" @click.prevent="$emit('switch-to-register')" class="switch-link">
          立即注册
        </a>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['switch-to-register'])

const email = ref('')
const password = ref('')
const rememberMe = ref(false)
const isLoading = ref(false)

const handleSubmit = async () => {
  if (isLoading.value) return
  
  isLoading.value = true
  
  try {
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 这里添加实际的登录逻辑
    console.log('登录信息:', {
      email: email.value,
      password: password.value,
      rememberMe: rememberMe.value
    })
    
    // 登录成功后的处理
    alert('登录成功！')
    
  } catch (error) {
    console.error('登录失败:', error)
    alert('登录失败，请重试')
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.login-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.form-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.form-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
}

.form-subtitle {
  color: var(--color-text-light);
  font-size: 1rem;
}

.form {
  margin-bottom: var(--space-xl);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.form-input {
  width: 100%;
  padding: var(--space-md);
  font-size: 1rem;
  border: 1px solid var(--color-background-mute);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-text);
  transition: all 0.2s ease;
  min-height: 48px;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.input::placeholder {
  color: var(--color-text-light-2);
}

/* 暗色主题输入框焦点 */
@media (prefers-color-scheme: dark) {
  .input:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox-text {
  font-size: 0.875rem;
  color: var(--color-text);
}

.forgot-link {
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.forgot-link:hover {
  color: var(--color-primary-light);
}

.form-submit {
  width: 100%;
  padding: var(--space-md);
  font-size: 1rem;
  font-weight: 600;
  min-height: 48px;
  position: relative;
}

.form-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: var(--space-sm);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-footer {
  text-align: center;
  padding-top: var(--space-lg);
  /* 使用更柔和的边框颜色 */
  border-top: 1px solid var(--color-background-mute);
}

.footer-text {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.switch-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.switch-link:hover {
  color: var(--color-primary-light);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-form {
    padding: var(--space-lg);
  }
  
  .form-title {
    font-size: 1.75rem;
  }
  
  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
}
</style>
